<template>
	<view class="main">
		<view class="search-pot">
			<u-search placeholder="搜故事" v-model="searchModel.storyName" @search="handelSearch" :clearabled="true" shape="round" :show-action="false"></u-search>
		</view>
		<!-- 故事 -->
		<view class="story-list pdb-10">
			<view v-for="(item, index) in storyList" :key="index" @click="pathToDrama(item.storyId)">
				<u-cell :title="item.storyName" :label="item.synopsis">
					<u-image slot="icon" :src="require('@/static/advert/zhl.png')" width="80" height="80"></u-image>
				</u-cell>
			</view>
			<u-loadmore :status="loadStatus" :loading-text="loadingText" :loadmore-text="loadmoreText"
				:nomore-text="nomoreText" line />
		</view>
	</view>
</template>

<script>
	import {list} from '@/api/storyApi/storyManage.js'
	export default {
		data() {
			return {
				// 底部加载条
				loadStatus: 'loadmore',
				// 自定义加载文字样式
				loadingText: '努力加载中',
				loadmoreText: '往下划划看',
				nomoreText: '实在没有了',
				storyList:[],
				searchModel:{
					storyName:'',
					storyStatus:'0'
				}
			}
		},
		created() {
			list(this.searchModel).then(res=>{
				this.storyList = res.rows
			})
		},
		onReachBottom() {
			console.log("触底了");
			// 触发流加载事件
			this.loadmore();
		},
		methods: {
			// 流加载
			loadmore() {
				console.log("触发到了");
				// 进行获取，判断是否触底，如果触底修改状态 ，如果没触底则将获取到的数据传入infoList中
				this.loadStatus = 'loading';
				setTimeout(() => {
					this.loadStatus = 'nomore';
				}, 300)
			},
			handelSearch() {
				list(this.searchModel).then(res=>{
					this.storyList = res.rows
				})
			},
			pathToDrama(storyId){
				uni.navigateTo({
					url: '/pages/story/drama/index?storyId=' + storyId
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.search-pot{
		padding: 8px 15px;
	}
	.story-list {
		min-height: 100px;
	}
</style>